<template>
  <!-- 搜索寄养消息页 -->

  <div class="container animate__animated animate__fadeIn">
    <div class="classfy">
      <div>
        <a-radio-group
          :options="[
            { label: '全部类型', value: '' },
            { label: '猫', value: '猫' },
            { label: '狗', value: '狗' },
            { label: '兔', value: '兔' },
          ]"
          default-value=""
          v-model="condition.petType"
          @change="handleTypeChange"
        />
      </div>
      <div>
        <a-radio-group
          :options="[
            { label: '全部性别', value: 0 },
            { label: '雄性', value: 1 },
            { label: '雌性', value: 2 },
          ]"
          :default-value="0"
          v-model="condition.petSex"
          @change="handleSexChange"
        />
      </div>
      <div>
        <a-radio-group
          :options="[
            { label: '全部年龄', value: 0 },
            { label: '1个月以内', value: 1 },
            { label: '1-2个月', value: 2 },
            { label: '2-6个月', value: 3 },
            { label: '6-12个月', value: 4 },
            { label: '1年以上', value: 5 },
          ]"
          :default-value="0"
          v-model="condition.petMonth"
          @change="handleMonthChange"
        />
      </div>
    </div>
    <div class="content clearfix">
      <div id="spin" v-if="isLoading">
        <span>
          <a-spin size="large" tip="加载中..." />
        </span>
      </div>
      <div v-if="isLoading && bailmentDatas.length == 0" style="width: 100%; height: 500px"></div>
      <img
        src="./svg/no-result.svg"
        alt="无数据"
        width="500px"
        style="display: block; height: 500px; margin: 0 auto"
        v-if="bailmentDatas.length == 0 && !isLoading && !isError"
      />
      <img
        src="./svg/error.svg"
        alt="出错"
        width="500px"
        style="display: block; height: 500px; margin: 0 auto"
        v-if="isError && !isLoading && bailmentDatas.length == 0"
      />
      <div
        class="item animate__animated animate__fadeIn"
        v-for="(item, index) in bailmentDatas"
        :key="index"
      >
        <router-link :to="{ path: '/detail', query: { id: item.id } }">
          <img :src="item.picture" alt="" width="100%" height="153px" />
          <h3>
            {{ item.title }}
          </h3>
          <div class="user-info">
            <span class="user-tag">用户</span>
            <span class="user-name">{{ item.userNickname }}</span>
            <span class="time">{{ item.createTime.slice(0, 16) }}</span>
          </div>
        </router-link>
      </div>
    </div>
    <div class="page-container" v-if="bailmentDatas.length != 0">
      <a-pagination
        :pageSize="pageInfo.pageSize"
        :total="pageInfo.total"
        @change="handlePageChange"
        show-less-items
      />
    </div>
  </div>
</template>

<script>
import requests from "./js/requests.js";
import { Pagination, Radio, Spin } from "ant-design-vue";

export default {
  name: "Adopt",
  components: {
    APagination: Pagination,
    ARadioGroup: Radio.Group,
    ASpin: Spin,
  },
  data() {
    return {
      isLoading: false,
      isError: false,
      pageInfo: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      },
      keyWord: this.$route.query.keyWord,
      condition: {
        petType: "",
        petSex: 0,
        petMonth: 0,
      },
      // 请求数据参数
      requestParam: {
        pageNum: 1,
        pageSize: 20,
        keyWord: "",
        petType: "",
        petSex: 0,
        minPetMonth: 0,
        maxPetMonth: 0,
      },
      bailmentDatas: [],
    };
  },
  mounted() {
    // 显示加载动画
    this.isLoading = true;
    // 绑定全局事件，输入框搜索时调用
    this.$bus.$on("search", this.search);
    // 获取关键词，关键词在点击搜索之后存储放到了vuex中
    this.requestParam.keyWord = this.$store.state.keyWord;
    // 定时器演示加载动画效果
    // setTimeout(() => {
      requests.searchBailmentData(this.requestParam).then((res) => {
        if (res.code == 200) {
          // 设置分页信息和装载数据
          this.pageInfo.pageNum = res.data.pageNum;
          this.bailmentDatas = res.data.list;
          this.pageInfo.total = res.data.total;
          // 关闭加载动画
          this.isLoading = false;
          // 页面加载没出错
          this.isError = false;
        } else {
          // 页面出错清空数据
          this.bailmentDatas = [];
          // 关闭加载动画
          this.isLoading = false;
          // 显示错误图片
          this.isError = true;
        }
      });
    // }, 500);
  },
  beforeDestroy() {
    this.$bus.$off("search");
  },
  methods: {
    // 搜索框搜索
    search(keyWord) {
      this.isLoading = true;
      this.$store.dispatch("setKeyWord", keyWord);
      this.requestParam.keyWord = keyWord;
      this.requestParam.pageNum = 1;
      requests.searchBailmentData(this.requestParam).then((res) => {
        if (res.code == 200) {
          this.pageInfo.pageNum = res.data.pageNum;
          this.bailmentDatas = res.data.list;
          this.pageInfo.total = res.data.total;
          this.isLoading = false;
          this.isError = false;
        } else {
          this.bailmentDatas = [];
          this.isLoading = false;
          this.isError = true;
        }
      });
    },
    // 宠物类型改变时重新获取数据
    handleTypeChange() {
      this.isLoading = true;
      this.requestParam.petType = this.condition.petType;
      this.requestParam.pageNum = 1;
      requests.searchBailmentData(this.requestParam).then((res) => {
        if (res.code == 200) {
          this.pageInfo.pageNum = res.data.pageNum;
          this.bailmentDatas = res.data.list;
          this.pageInfo.total = res.data.total;
          this.isLoading = false;
          this.isError = false;
        } else {
          this.bailmentDatas = [];
          this.isLoading = false;
          this.isError = true;
        }
      });
    },
    // 宠物性别改变时重新获取数据
    handleSexChange() {
      this.isLoading = true;
      this.requestParam.petSex = this.condition.petSex;
      this.requestParam.pageNum = 1;
      requests.searchBailmentData(this.requestParam).then((res) => {
        if (res.code == 200) {
          this.pageInfo.pageNum = res.data.pageNum;
          this.bailmentDatas = res.data.list;
          this.pageInfo.total = res.data.total;
          this.isLoading = false;
          this.isError = false;
        } else {
          this.bailmentDatas = [];
          this.isLoading = false;
          this.isError = true;
        }
      });
    },
    // 宠物年龄改变时重新获取数据
    handleMonthChange() {
      this.isLoading = true;
      switch (this.condition.petMonth) {
        case 0:
          this.requestParam.minPetMonth = 0;
          this.requestParam.maxPetMonth = 0;
          break;
        case 1:
          this.requestParam.minPetMonth = 0;
          this.requestParam.maxPetMonth = 1;
          break;
        case 2:
          this.requestParam.minPetMonth = 1;
          this.requestParam.maxPetMonth = 2;
          break;
        case 3:
          this.requestParam.minPetMonth = 2;
          this.requestParam.maxPetMonth = 6;
          break;
        case 4:
          this.requestParam.minPetMonth = 6;
          this.requestParam.maxPetMonth = 12;
          break;
        case 5:
          this.requestParam.minPetMonth = 12;
          this.requestParam.maxPetMonth = 360;
          break;
      }
      this.requestParam.pageNum = 1;
      requests.searchBailmentData(this.requestParam).then((res) => {
        if (res.code == 200) {
          this.pageInfo.pageNum = res.data.pageNum;
          this.bailmentDatas = res.data.list;
          this.pageInfo.total = res.data.total;
          this.isLoading = false;
          this.isError = false;
        } else {
          this.bailmentDatas = [];
          this.isLoading = false;
          this.isError = true;
        }
      });
    },
    // 页数改变时获取数据
    handlePageChange(pageNum) {
      this.isLoading = true;
      this.requestParam.pageNum = pageNum;
      requests.searchBailmentData(this.requestParam).then((res) => {
        if (res.code == 200) {
          this.pageInfo.pageNum = res.data.pageNum;
          this.bailmentDatas = res.data.list;
          this.pageInfo.total = res.data.total;
          this.isLoading = false;
          this.isError = false;
        } else {
          this.bailmentDatas = [];
          this.isLoading = false;
          this.isError = true;
        }
      });
    },
  },
};
</script>

<style scoped>
#spin {
  width: 1440px;
  height: 100px;
  position: fixed;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: red; */
}

.container {
  width: 1440px;
  margin: 0 auto;
  /* background-color: rgb(111, 111, 111); */
}

.classfy {
  width: 100%;
  height: 200px;
  margin-bottom: 20px;
  padding-top: 30px;
  border-bottom: 1px solid rgb(190, 190, 190);
}

.classfy > div {
  width: 100%;
  height: 50px;
}

.item {
  width: 272px;
  height: 250px;
  margin-bottom: 10px;
  margin: 0 8px 15px 8px;
  padding: 0 0px 15px 0px;
  float: left;
  color: gray;
  border-radius: 10px;
  transition: 0.3s;
  /* background-color: rgb(212, 212, 212); */
  /* border: 2px solid saddlebrown; */
}

.item:hover {
  box-shadow: 0 5px 10px rgb(0, 0, 0, 0.5);
  transform: translateY(-5px);
}

.item img {
  border-radius: 10px;
}

.item h3 {
  margin-top: 10px;
  height: 48px;
  padding: 0 5px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 600;
  text-overflow: ellipsis;
  /* background-color: antiquewhite; */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.item .user-info {
  padding: 0 5px;
  color: gray;
}

.item .user-info .user-tag {
  display: block;
  width: 32px;
  height: 20px;
  padding-left: 3px;
  float: left;
  border-radius: 4px;
  font-size: 12px;
  color: rgb(140, 140, 140);
  border: 1px solid rgb(140, 140, 140);
  /* background-color: coral; */
}

.item .user-info .user-name {
  display: block;
  width: 110px;
  height: 20px;
  padding-left: 4px;
  float: left;
  font-size: 14px;
  line-height: 18px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* background-color: coral; */
}

.item .user-info .time {
  display: block;
  width: 110px;
  height: 20px;
  font-size: 14px;
  float: right;
  overflow: hidden;
  /* background-color: coral; */
}

.page-container {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: antiquewhite; */
}
</style>